<template>
    <view class="qrcode-modal" :class="[currentTheme, { 'dark-mode': isDarkMode }]" v-if="visible"
        @tap="closeQrCodeModal">
        <view class="qrcode-content" @tap.stop>
            <view class="qrcode-header">
                <text class="qrcode-title">分享二维码</text>
                <text class="qrcode-close bigfont big-guanbi" @tap.stop="closeQrCodeModal"></text>
            </view>
            <view class="qrcode-body">
                <image class="qrcode-image" :src="qrCodeUrl" mode="aspectFit"></image>
                <text class="qrcode-tips">扫描二维码查看礼簿</text>
            </view>
            <view class="qrcode-footer">
                <view class="qrcode-btn-group">
                    <view class="qrcode-btn save" @tap.stop="saveQrCode">
                        <text class="btn-icon bigfont big-xiazai"></text>
                        <text>保存图片</text>
                    </view>
                    <view class="qrcode-btn share" @tap.stop="shareToWechat">
                        <text class="btn-icon bigfont big-weixin"></text>
                        <text>分享好友</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { currentTheme, isDarkMode } from '@/store/theme';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    qrCodeUrl: {
        type: String,
        required: true
    }
});

const emit = defineEmits(['update:visible']);

const closeQrCodeModal = () => {
    emit('update:visible', false);
};

const saveQrCode = async () => {
    try {
        uni.saveImageToPhotosAlbum({
            filePath: props.qrCodeUrl,
            success: () => {
                uni.showToast({
                    title: '保存成功',
                    icon: 'success'
                });
            },
            fail: () => {
                uni.showToast({
                    title: '保存失败',
                    icon: 'none'
                });
            }
        });
    } catch (error) {
        console.error('保存失败:', error);
        uni.showToast({
            title: '保存失败',
            icon: 'none'
        });
    }
};

const shareToWechat = async () => {
    try {
        uni.showShareImageMenu({
            path: props.qrCodeUrl,
            success: () => {
                console.log('分享图片成功');
            },
            fail: (err) => {
                console.error('分享图片失败:', err);
                uni.showToast({
                    title: '分享失败',
                    icon: 'none'
                });
            }
        });

    } catch (error) {
        console.error('分享失败:', error);
        uni.showToast({
            title: '分享失败',
            icon: 'none'
        });
    }
};

</script>

<style lang="scss">
:deep(.qrcode-modal) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.qrcode-content {
    width: 600rpx;
    background-color: #fff;
    border-radius: 24rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.qrcode-header {
    padding: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f5f5f5;
}

.qrcode-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
}

.qrcode-close {
    font-size: 48rpx;
    color: #999;
    line-height: 1;
    padding: 0 16rpx;
}

.qrcode-body {
    padding: 48rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qrcode-image {
    width: 400rpx;
    height: 400rpx;
    margin-bottom: 24rpx;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.qrcode-tips {
    font-size: 28rpx;
    color: #666;
    margin-top: 16rpx;
}

.qrcode-footer {
    padding: 32rpx;
    border-top: 2rpx solid #f5f5f5;
}

.qrcode-btn-group {
    display: flex;
    justify-content: space-around;
    gap: 24rpx;
}

.qrcode-btn {
    flex: 1;
    height: 80rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    gap: 8rpx;
    transition: all 0.3s ease;
}

.qrcode-btn.save {
    background-color: #f5f5f5;
    color: #333;
}

.qrcode-btn.share {
    background-color: var(--theme-primary, #4CAF50) !important;
    color: #fff;
}

.qrcode-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.btn-icon {
    font-size: 32rpx;
}

/* 暗黑模式样式 */
:global(.dark-mode) {
    .qrcode-content {
        background-color: #1e1e1e;
    }

    .qrcode-header {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .qrcode-title {
        color: rgba(255, 255, 255, 0.9);
    }

    .qrcode-close {
        color: rgba(255, 255, 255, 0.6);
    }

    .qrcode-tips {
        color: rgba(255, 255, 255, 0.6);
    }

    .qrcode-footer {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    .qrcode-btn.save {
        background-color: #2c2c2c;
        color: rgba(255, 255, 255, 0.9);
    }
}
</style>